<template>
<div>
    <div class="shopcart">
    	<div class="content flex" @click="toggleList">
    		<div class="content-left cell-main">
    			<div class="logo-wrapper">
    				<div class="logo" :class="{'highlight':totalCount>0}">
    					<i class="iconfont icon-gouwuche1" :class="{'highlight':totalCount>0}"></i>
    				</div>
    				<div class="num" v-show="totalCount>0">{{totalCount}}</div>
    			</div>
    			<div class="price" :class="{'highlight':totalPrice>0}" >￥{{totalPrice}}</div>
    			<div class="desc">另需配送费￥{{deliveryPrice}}元</div>
    		</div>
    		<div class="content-right">
    			<div class="pay" :class="payClass" @click.stop.prevent="pay">{{payDesc}}</div>
    		</div>
    	</div>
     <div class="ball-container">
        <div v-for="ball in balls">
          <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
            <div class="ball" v-show="ball.show">
              <div class="inner inner-hook"></div>
            </div>
          </transition>
        </div>
      </div>
      <transition name="fold">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header flex">
            <h1 class="title cell-main l">购物车</h1>
            <span class="empty" @click="empty">清空</span>
          </div>
          <div class="list-content" ref="listContent">
            <ul>
              <li class="food flex" v-for="food in selectFoods">
                <span class="name cell-main">{{food.name}}</span>
                <span class="listprice">￥{{food.price*food.count}}</span>
                <div class="cartcontrol-wrapper">
                  <cartcontrol @add="addFood" :food="food"></cartcontrol>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <transition name="fade">
      <div class="expand" @click="hideList" v-show="listShow" ></div>
    </transition>
    </div>
</template>

<script type="ecmascript-6">
import BScroll from 'better-scroll';
import cartcontrol from '../cartcontrol/cartcontrol'
export default{
 props:{
 	selectFoods:{
 		type:Array,
 		default(){
 			return[{
 				price:10,
        count:1
 			}]
 		}
 	},
 	deliveryPrice:{
 		type:Number,
 		default:0
 	},
 	minPrice:{
 		type:Number,
 		default:0
 	}
 },
  data(){ 
    return{
    balls: [
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          }
        ],
        dropBalls: [],
        fold: true
  }},
  computed:{
  	totalPrice() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          total += food.price * food.count;
        });
        return total;
      },
  	totalCount(){
  		let count=0;
  		this.selectFoods.forEach((food)=>{
  			count+=food.count;
  		});
  		return count;
  	},
  	payDesc(){
  		switch(true){
  			case this.totalPrice===0: return `￥${this.minPrice}元起送`;	break;
  			case this.totalPrice<this.minPrice:
  			let diff=this.minPrice-this.totalPrice;
  			return `还差￥${diff}元起送`;
  			break;
  			default: 
  			return '去结算';
  			break;
  		}
  	},
  	 payClass() {
        if (this.totalPrice < this.minPrice) {
          return 'not-enough';
        } else {
          return 'enough';
        }
      },
      listShow(){
        if(!this.totalCount){
          this.fold=true;
          return false;
        }
        let show=!this.fold;
        if(show){
          this.$nextTick(()=>{
            if(!this.scroll){
              this.scroll=new BScroll(this.$refs.listContent,{
                click:true
              });
            }else{
              this.scroll.refresh();
            }
          })
        }
        return show;
      }
  },
  methods:{
    drop(el){
      for(let i=0;i<this.balls.length;i++){
        let ball=this.balls[i];
        if (!ball.show) {
          ball.show=true;
          ball.el=el;
          this.dropBalls.push(ball);
          return;
        }
      }
    },
          addFood(target){
        this.drop(target);
      },
    beforeDrop(el){
      let count =this.balls.length;
      while(count--){
        let ball=this.balls[count];
        if(ball.show){
          let rect=ball.el.getBoundingClientRect();
          let x=rect.left-32;
          let y=-(window.innerHeight-rect.top-22);
          el.style.display='';
          el.style.webkitTransform='translateY('+y+'px)';
          el.style.transform='translateY('+y+'px)';
          let inner=el.getElementsByClassName('inner-hook')[0];
          inner.style.webkitTransform='translateX('+x+'px)';
          inner.style.transform='translateX('+x+'px)';
        }
      }
      },
       dropping(el, done) {
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight;
        this.$nextTick(() => {
          el.style.webkitTransform = 'translate3d(0,0,0)';
          el.style.transform = 'translate3d(0,0,0)';
          let inner = el.getElementsByClassName('inner-hook')[0];
          inner.style.webkitTransform = 'translate3d(0,0,0)';
          inner.style.transform = 'translate3d(0,0,0)';
          el.addEventListener('transitionend', done);
        });
      },
      afterDrop(el){
        let ball=this.dropBalls.shift();
        if(ball){
          ball.show=false;
          el.style.display='none'
        }
      },
      empty(){
        this.selectFoods.forEach((food)=>{
          food.count=0;
        })
      },
      toggleList(){
      if(this.totalCount){
        this.fold=!this.fold;
      }
    },
    hideList(){
      this.fold=true;
    },
     pay() {
        if (this.totalPrice < this.minPrice) {
          return;
        }
        window.alert(`支付${this.totalPrice}元`);
      },

  },

  components:{
    cartcontrol
  }
}
</script>

<style rel="stylesheet" lang="less">
   .shopcart{
   	position: fixed;
   	left: 0;
   	bottom: 0;
   	z-index: 3;
   	width: 100%;
   	height: 2.4rem;
   	.content{
   		background: #141d27;
   		color: rgba(255,255,255,0.4);
   		font-size: 0;
   	}
   	.content-right{
   		flex:0 0 5.25rem;
   	}
   	.logo-wrapper{
   		display: inline-block;
   		vertical-align: top;
   		position: relative;
   		top: -0.5rem;
   		margin: 0 0.6rem;
   		padding: 0.3rem;
   		width: 2.8rem;
   		height: 2.8rem;
   		box-sizing: border-box;
   		border-radius: 50%;
   		background: #141d27;
   	}
    .num{

    }
   	.logo{
   		width: 100%;
   		height: 100%;
   		border-radius: 50%;
   		text-align: center;
   		background: #2b343c;
   	}
   	.icon-gouwuche1{
   		line-height: 2.2rem;
   		font-size: 24px;
   		color: #80858a;
   	}
   	.price{
   		display: inline-block;
   		vertical-align: top;
   		margin-top: 0.6rem;
   		line-height: 1.2rem;
   		margin-right: 0.6rem;
   		box-sizing: border-box;
   		border-right: 0.05rem solid rgba(255,255,255,0.1);
   		font-size: 16px;
   		font-weight: 700;
   	}
   	.desc{
   		display: inline-block;
   		vertical-align: top;
   		margin: 0.6rem 0;
   		line-height: 1.2rem;
   		font-size: 10px;
   	}
   	.content-right{
   		flex:0 0 5.25rem;
   	}
   	.pay{
   		line-height: 2.4rem;
   		text-align: center;
   		font-size: 12px;
   		font-weight: 700;
   	}
   	.not-enough{
   		background-color: #2b333b;
   	}
   	.enough{
   		background: #00b43c;
   		color: #fff;
   	}
   	.price.highlight{
   		color: #fff;
   	}
   	.logo.highlight{
   		background: #00a0dc;
   	}
   	.icon-gouwuche1.highlight{
   		color: #fff;
   	}
    .shopcart-list{
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      transform:translate3d(0,-100%,0);

    }
    .fold-enter-active, .fold-leave-active{
      transition:all 0.5s;
    }
    .fold-enter, .fold-leave-active{
      transform:translate3d(0,0,0)
    }
    .list-header{
      line-height: 2.0rem;
      padding: 0 0.9rem;
      background-color: #f3f5f7;
      border-bottom: 0.05rem solid rgba(7, 17, 27, 0.1);
    }
    .empty{
      font-size: 12px;
      color:#00a0dc; 
    }
    .list-content{
      padding:  0 0.9rem;
      max-height: 10.85rem;
      overflow: hidden;
      background-color: #fff;
    }
    .food{
      position: relative;
      padding: 0.6rem 0;
      box-sizing: border-box;
       .name,.listprice{
      line-height: 1.2rem;
      font-size: 14px;
      color: rgb(7, 17, 27);
    }
    .listprice{
    font-weight: 700;
    color: #f01414;
    margin-right: 4.2rem;
    }
    .cartcontrol-wrapper{
       position: absolute;
       right: 0;
       bottom: 6px;
    } 
    }

   } 
    .ball-container{
       .ball{
      position: fixed;
      left:1.6rem;
      bottom: 1.1rem;
      z-index: 3;
      transition:all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41); 
    }
    .inner{
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      background-color: #00a0dc;
      transition:all 0.4s linear;
    }
    }
   .expand{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    backdrop-filter: blur(10px);
    opacity: 1;
     background: rgba(7, 17, 27, 0.6);
   }
   .fade-enter-active, .fade-leave-active{
      transition: all 0.5s;
   }
    .fade-enter, .fade-leave-active{
       opacity: 0;
      background: rgba(7, 17, 27, 0);
    }
     
</style>